import { defineComponent, reactive, computed, watch, ref } from "vue";
import { getCurrentIndex, virtualType } from "./util";
import "./style.scss";
export default defineComponent({
  name: "VirtualList",
  props: {
    data: {
      type: Array,
      required: true,
      default: () => [],
    },
    // fixed variable waterfall
    type: {
      type: String,
      required: true,
    },
    // 每屏可见的数据条数
    remain: {
      type: Number,
      required: true,
    },
    size: {
      type: Number,
      required: false,
    },
    // 前后各渲染几屏
    // screen: {
    //   type: Array,
    //   required: false,
    //   default: () => [1, 1],
    // },
    //加载更多 触底距离
    distance: {
      type: [Number, String],
      required: false,
      default: 50,
    },
    // 截流函数触发间隔
    interval: {
      type: Number,
      required: false,
      default: 0,
    },
    virtualHieght: {
      type: String,
      required: false,
      default: "100%",
    },
    unit: {
      type: String,
      required: false,
      default: "px",
    },
    marginBottom: {
      type: [Number, String],
      required: false,
      default: 0,
    },
  },
  setup(props) {
    const state = reactive({
      start: 0,
      end: 0,
      offset: 0,
      leftOffset: 0,
      rightOffset: 0,
      leftStart: 0,
      rightStart: 0,
      leftEnd: 0,
      rightEnd: 0,
      leftHeight: 0,
      rightHieght: 0,
      scrollTop: 0,
      screen: [1, 1],
      waterfallInfo: {
        left: [],
        right: [],
      },
    });
    const scrollBar = ref(null);
    const { type, remain, data, size, unit } = props;
    /* computed */
    const isWaterfall = computed(() => {
      return type === virtualType.WATERFALL;
    });
    const transform = computed(() => {
      if (!isWaterfall) {
        return {
          transform: `translate3d(0,${state.offset}px,0)`,
        };
      }
      return null;
    });
    const leftPrevCount = computed(() => {
      return Math.min(state.leftStart, prevScreen.value);
    });
    const prevScreen = computed((): number => {
      let num = remain * state.screen[0];
      return num;
    });
    const nextScreen = computed(() => {
      return remain * state.screen[0];
    });
    const leftNextCount = computed(() => {
      return state.waterfallInfo
        ? Math.min(
            state.waterfallInfo.left.length - state.leftEnd,
            nextScreen.value
          )
        : 0;
    });
    const renderLeft = computed(() => {
      return state.waterfallInfo
        ? state.waterfallInfo.left.slice(
            state.leftStart - leftPrevCount.value,
            state.leftEnd + leftNextCount.value
          )
        : 0;
    });
    const renderRight = computed(() => {
      return state.waterfallInfo
        ? state.waterfallInfo.right.slice(
            state.rightStart - rightPrevCount.value,
            state.rightEnd + rightNextCount.value
          )
        : 0;
    });
    const rightPrevCount = computed(() => {
      return Math.min(state.rightStart, prevScreen.value);
    });
    const rightNextCount = computed(() => {
      return state.waterfallInfo
        ? Math.min(
            state.waterfallInfo.right.length - state.rightEnd,
            nextScreen.value
          )
        : 0;
    });

    const nextCount = computed(() => {
      return Math.min(data.length - state.end, nextScreen.value);
    });
    /* computed */

    /* watch */
    // watch(data, (newData, oldData) => {
    //   // 防止组件外部单个item更改状态后触发watch 例

    //   if (newData.length === oldData.length) return;
    //   let prevLength, newLoadData;
    //   switch (type) {
    //     case virtualType.FIXED:
    //       scrollBar.style.height = newData.length * size + unit;
    //       break;
    //     case virtualType.VARIABLE:
    //       prevLength = this.variableData.length;
    //       newLoadData = newData.slice(prevLength);
    //       // pushData 此数据并没有偏移量  页面通过renderData更新之后 会触发update 在updated中通过渲染的节点会主动更新后面数据的偏移量
    //       this.variableData = [
    //         ...this.variableData,
    //         ...this.getVisiblePosition(newLoadData),
    //       ];
    //       break;
    //     case virtualType.WATERFALL:
    //       prevLength =
    //         this.waterfallInfo.left.length + this.waterfallInfo.right.length;
    //       newLoadData = newData.slice(prevLength);
    //       this.handleWaterfallData(newLoadData);
    //       break;
    //   }
    //   // 当滚动时未触发回弹时会造成$emit('scroll')事件不执行 会导致懒加载处理的dom时获取到的是老数据
    //   this.$nextTick(() => {
    //     this.$emit(
    //       "domUpdateSuccess",
    //       this.type === virtualType.WATERFALL
    //         ? {
    //             renderLeftData: this.renderLeft,
    //             renderRightData: this.renderRight,
    //           }
    //         : this.renderData
    //     );
    //     this.emitScrollEvent();
    //   });
    // });
    return () => {
      return (
        <div
          class="virtual-list"
          ref="virtualList"
          on-scroll_passive="getScrollFn"
        >
          <div ref={scrollBar} class="scroll-bar"></div>
        </div>
      );
    };
  },
});
